<!--
- Author:  LiShibin.
- Date:    2017/9/27 0027.
- File:    list.
-->
<template>
  <div class="Web_Box pt45">
    <div class=" plant_tab">
      <div class="Tabs2">
        <ul>
          <li :class="{'on': status == '0'}" @click="switchStatus('0')">全部植物</li>
          <li :class="{'on': status == '1'}" @click="switchStatus('1')">现有植物</li>
          <li :class="{'on': status == '2'}" @click="switchStatus('2')">曾经拥有</li>
        </ul>
      </div>
    </div>
    <!--植物-->
    <div class="Plantclassification">
      <ul class="f-cb">
        <li :class="{'on': type == '0'}" @click="switchType('0')">全部</li>
        <li :class="{'on': type == '1'}" @click="switchType('1')">私有</li>
        <li :class="{'on': type == '2'}" @click="switchType('2')">共享</li>
      </ul>
    </div>
    <div
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="false"
      infinite-scroll-distance="0"
      infinite-scroll-immediate-check="false">
      <div class="graden_cont" :class="{'Fadeplant': plant.state == 0}" v-for="plant in plantList.data">
        <ul class="f-cb">
          <li class="mood_graden" @click="gotoPlantDetail(plant)"><a><img :src="$config.imgsite + $config.uploadImgSrc + plant.flower_image + '_w150'"> </a></li>
          <li>
            <div class="graden_bg">
              <div style="position: absolute; right: 0; top: 0; width: 26px; height: 26px" v-show="plant.state != 0">
                <img :src="$config.imgsite + $config.uploadImgSrc + plant.d_image + '_w150'">
              </div>
              <i class="iconfont icon-tab_potato_heighlight"></i>
              <h3 @click="gotoPlantDetail(plant)"><a>{{plant.flower_name}} <span style="color: #aaa; font-size: 12px;">(编号:{{plant.sg_id != 0 ? plant.sg_id + '-': ''}}{{plant.g_id}}-{{plant.o_id}})</span></a></h3>
              <p style="font-size: 12px">所属花园：{{plant.s_garden_name ? plant.s_garden_name + '-': ''}}{{plant.garden_name}}</p>
              <p style="font-size: 12px"  v-show="plant.sg_id != '0'">管理员：{{plant.creator_name}}</p>

              <p style="font-size: 12px">添加时间：{{plant.add_time | timestampToDate('yyyy-MM-dd')}}</p>
              <p style="font-size: 12px" v-show="plant.sg_id != '0' && (plant.start_time || plant.end_time)">共享周期：{{plant.start_time | timestampToDate('yyyy-MM-dd')}}~{{plant.end_time | timestampToDate('yyyy-MM-dd')}}</p>
              <div class="Release3 f-cb">
                <a class="rbtn" @click="showSheet(plant)" v-show="plant.state == 1 && plant.is_creator == '1'"><i class="iconfont icon-bianji"></i>编辑植物</a>
                <a class="rbtn" @click="recover(plant.o_id)" v-show="plant.state == 0 && plant.is_creator == '1'"><i class="iconfont icon-bianji"></i>复活</a>
                <p class="" v-show="plant.state == 2 || plant.state == 3">花园已删除</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <loading-more :allLoaded="plantList.allLoaded" :show="plantList.data.length > 0"></loading-more>
    <empty-data :show="plantList.allLoaded && plantList.data.length <= 0"></empty-data>
    <footer-tab></footer-tab>
    <mt-actionsheet
      :actions="plantActions"
      v-model="sheetVisible">
    </mt-actionsheet>
  </div>
</template>

<script>
  import {Actionsheet} from 'mint-ui'

  export default{
    data() {
      return {
        status: '1', // 0所有 1现有 2删除
        type: '0', // 0所有 1私有 2共享
        plantList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []},
        sheetVisible: false,
        plantActions: [{
          name: '修改信息',
          method: this.gotoEditPlant
        }, {
          name: '删除植物',
          method: this.delPlant
        }],
        currentEditPlant: {}
      }
    },
    components: {
      'mt-actionsheet': Actionsheet
    },
    created() {
      this.getPlantList(this.plantList.page, this.plantList.pageSize)
    },
    methods: {
      switchType(type) {
        this.type = type
        this.plantList = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
        this.getPlantList(this.plantList.page, this.plantList.pageSize)
      },
      gotoPlantDetail(plant) {
        this.$router.push({name: 'plant-detail', params: {id: plant.o_id}, query: {isCurator: plant.is_curing, isCreator: this.isCreator}})
      },
      showSheet(plant) {
        this.sheetVisible = true
        this.currentEditPlant = plant
      },
      switchStatus(status) {
        this.status = status
        this.plantList = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
        this.getPlantList(this.plantList.page, this.plantList.pageSize)
      },
      getPlantList(page, pageSize) {
        this.plantList.loading = true
        this.$request.getMyPlantList(this.status, this.type, page, pageSize).then(data => {
          if (data.length < this.plantList.pageSize) {
            this.plantList.allLoaded = true
          }
          this.plantList.data = [...this.plantList.data, ...data]
        }).finally(() => {
          this.plantList.requested = true
          this.plantList.loading = false
        })
      },
      loadMore() {
        if (this.plantList.loading || this.plantList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getPlantList(++this.plantList.page, this.plantList.pageSize)
        }, 500)
      },
      gotoEditPlant(id) {
        this.$router.push({name: 'plant-edit', params: {id: this.currentEditPlant.o_id}})
      },
      delPlant() {
        this.$messageBox.confirm('确定删除植物？').then(data => {
          this.$request.delPlantInGarden(this.currentEditPlant.o_id).then(data => {
            this.$toast('删除植物成功')
            this.plantList = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
            this.getPlantList(this.plantList.page, this.plantList.pageSize)
          }).catch(e => {
            this.$toast('删除失败:' + e.msg)
          })
        }).catch(() => {
        })
      },
      recover(id) {
        this.$request.recoverPlant(id).then(data => {
          this.$toast('恢复成功')
          this.plantList = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
          this.getPlantList(this.plantList.page, this.plantList.pageSize)
        }).catch(e => {
          this.$toast('恢复失败' + e.msg)
        })
      }
    }
  }
</script>

<style lang="less">
  .Plantclassification{
    .on {
      color: #3dbb6e;
    }
  }
</style>